import React from 'react'
import {Link} from 'react-router-dom'
import {observer, inject} from "mobx-react";
import http from '../../../util/http'

import {Layout, Row, message, Col, Menu, Dropdown, Modal, Input, Button, Table, Tooltip,} from 'antd';
import './PurchaseOrderDetail.css'
import {
    DownOutlined,
    FormOutlined,
    CopyFilled,
    PrinterFilled,
} from "@ant-design/icons";
// import axios from "axios";
import * as url from "../../../util/api";

const {Search} = Input;
const customerSearchColumns = [

    {
        title: '客户名称',
        dataIndex: 'customerName',

    },
    {
        title: '客户编码',
        dataIndex: 'customerNo',

    },
    {
        title: '地区',
        dataIndex: 'area',
    },
    {
        title: '级别',
        dataIndex: 'level',
    },

];
const customerSearchTableData = [];

@inject('orderStore')
@observer
class PurchaseOrderDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countMoney: '0.00',
            visible: false,
            orderTypeText: '全部级别',
            selectValue: 1,
            current: sessionStorage.getItem('current'),
            orderNo: ' DH-O-20200508-405868 ',
            customerName: '小雷家电线厂',
            value: 1,
            logVisible: false,
            modalTitle: '',
            checkVisible: false,
            orderDetailData: '',
            checkBtText:'',
        }
    }

    handleClick = e => {
        console.log('click ', e);
        sessionStorage.setItem("current",e.key)
        this.setState({
            current: e.key,
        });
    };
    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.setState({
            selectValue: value,
        })
    }
    handleOk = e => {
        console.log(e);
        console.log(this.props.orderStore.orderAuditStatus);
        switch (this.props.orderStore.orderAuditStatus) {
            case 0:
                this.checkOrder();
                break
            case 1:
                this.checkFinancial();
                break
        }
        this.setState({
            visible: false,
            checkVisible: false,
        });
    };
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
            checkVisible: false,
        });
    };
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };
    setModalTitle = (orderAuditStatus) => {
        let str = '',checkBtText=''
        switch (orderAuditStatus) {
            case 0:
                str = '订单审核'
                checkBtText='通过'
                break
            case 1:
                str = '财务审核'
                checkBtText='通过'
                break
            case 2:

                checkBtText='出库'
                break
        }
        this.setState({
            modalTitle: str,
            checkBtText:checkBtText,
        });
    }
    openModal = () => {
        if (this.props.orderStore.orderAuditStatus===2){
            this.props.history.replace('/homepage/purchaseOrderDetail/PurchaseOrderOutStock');
        }else{
            this.setState({
                checkVisible: true,
            })
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.setModalTitle(this.props.orderStore.orderAuditStatus)
    }

    componentDidMount() {
        this.setModalTitle(this.props.orderStore.orderAuditStatus)
        console.log(this.props.location);
        //判断menuType决定初始页面
        if (this.props.orderStore.menuType===0) {
            if (this.props.orderStore.orderAuditStatus === 2 || this.props.orderStore.orderAuditStatus === 3) {
                sessionStorage.setItem('current','出库发货记录')
                this.setState({
                    current: '出库发货记录'
                });
            }else{
                sessionStorage.setItem('current','订单详情')
                this.setState({
                    current: '订单详情'
                });
            }
        }else{
            sessionStorage.setItem('current','订单详情')
            this.setState({
                current: '订单详情'
            });
        }

    }

    /*id查询商品信息*/
    selectGoodsInfo = (goodsId) => {
        let obj = {goodsId: goodsId}
        console.log(obj);
        http({
            url: url.orderQueryGoods,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {

            }

        }).catch(err => {
            console.log(err);
        })
    }
    /*id查询客户信息*/
    selectCustomerInfo = (customerId) => {
        let obj = {customerId: customerId}
        console.log(obj);
        http({
            url: url.orderOrder_examine,//id查询客户信息接口
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {

            }

        }).catch(err => {
            console.log(err);
        })
    }
    /*审核订单*/
    checkOrder = () => {
        let obj = {orderMainId: this.props.orderStore.orderMainId}
        console.log(obj);
        http({
            url: url.orderOrder_examine,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                message.success(resp.data.msg)
                this.props.history.replace('/homepage/purchaseorder');
            }

        }).catch(err => {
            console.log(err);
        })
    }
    /*收款审核*/
    checkFinancial = () => {
        let obj = {orderMainId: this.props.orderStore.orderMainId}
        console.log(obj);
        http({
            url: url.orderAudit_financial,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                message.success(resp.data.msg)
                this.props.history.replace('/homepage/purchaseorder');
            }

        }).catch(err => {
            console.log(err);
        })
    }
    /*出库审核*/
    checkOutbound = () => {
        let obj = {orderMainId: this.props.orderStore.orderMainId}
        console.log(obj);
        http({
            url: url.orderAudit_outbound,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                this.props.history.replace('/homepage/purchaseorder');
                message.success(resp.data.msg)
            }

        }).catch(err => {
            console.log(err);
        })
    }
    /*出库记录*/
    outboundRecord = () => {
        let obj = {
            purchaseOrderNumber: null,  //采购订单号
            date: null,   //出库日期
            receiptOutNoString: "234",    //出库单号
            repositoryId: "1",  //仓库id
            stockInOutType: "   //退货出库",
            creator: "阿梅",   //制单人
            handledBy: null,   //经办人
            receiptOutRemarks: "fdf",    //备注
            repository: {
                repositoryId: "1",      //仓库id
                repositoryName: "beijing",   //仓库名称
            },
            list: [
                {
                    stockInOut: 12,    //出库数
                    receiptOutNo: null,    //出库单号
                    receiptOutRemarks: "fdf",    //备注
                    goodsId: "1"    //商品id
                }
            ]
        }
        console.log(obj);
        http({
            url: url.addCommodityDeliveryRecord,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                message.success(resp.data.msg)

            }

        }).catch(err => {
            console.log(err);
        })
    }
    /*发货审核*/
    orderDeliver = () => {
        let obj = {orderMainId: this.props.orderStore.orderMainId}
        console.log(obj);
        http({
            url: url.orderDeliver_goods,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                message.success(resp.data.msg)

            }

        }).catch(err => {
            console.log(err);
        })
    }

    render() {
        const customerTypeMenu = (
            <Menu>
                <Menu.Item>
                    <a className={'全部级别' === this.state.orderTypeText ? "active" : null} rel="noopener noreferrer"
                       href='true'
                       onClick={e => this.handleMenuClick(e, '全部级别')}>
                        全部级别
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a className={'普通' === this.state.orderTypeText ? "active" : null}
                       rel="noopener noreferrer" href='true' onClick={e => this.handleMenuClick(e, '普通')}>
                        普通
                    </a>
                </Menu.Item>
            </Menu>
        );

        return (<div style={{padding: 10, position: 'relative'}}>
            <Row>
                <Col span={14} className={'oMenu'}>
                    <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">

                        <Menu.Item key="订单详情">
                            <Link to={'/homepage/purchaseOrderDetail/purchaseOrderDetailItem'}> 订单详情</Link>
                        </Menu.Item>
                        <Menu.Item key="出库发货记录">
                            <Link to={'/homepage/purchaseOrderDetail/PurchaseOrderOutStock'}> 出库发货记录</Link>
                        </Menu.Item>
                        <Menu.Item key="收款记录">
                            <Link to={'/homepage/purchaseOrderDetail/PurchaseOrderMoneyRecord'}> 收款记录</Link>
                        </Menu.Item>
                        <Menu.Item key="发货签收记录">
                            <Link to={'/homepage/purchaseOrderDetail/PurchaseOrderDeliverGoods'}> 发货签收记录</Link>
                        </Menu.Item>
                    </Menu>
                </Col>
                <Col span={10} style={{borderBottom: '1px solid #F0F0F0',}}>
                    <Row align={'middle'} style={{height: '100%'}}
                         className={this.props.location.pathname === "/homepage/purchaseOrderDetail/purchaseOrderDetailItem" ? '' : 'displayNone'}>
                        <Col span={24} align={'right'}>
                            <span className={'btClass'}><FormOutlined/> 修改</span>
                            <span className={'btClass'}><CopyFilled/> 复制</span>
                            <span className={'btClass'}><PrinterFilled/> 打印</span>
                            <span className={'btClass'}><span className={'iconfont icon-ziyuan'}/> 导出</span>
                            <span className={'btClass'}><span className={'iconfont icon-zuofei'}/> 作废</span>
                            <Button style={{
                                marginLeft: 20,
                                width: 80,
                                borderRadius: 4,
                                backgroundColor: '#12C09F',
                                color: 'white'
                            }} onClick={this.openModal}>{this.state.checkBtText}</Button>
                        </Col>
                    </Row>
                </Col>
            </Row>
            <Modal
                title=""
                width={'100%'}
                visible={this.state.visible}
                cancelText={'取消'}
                okText={'确定'}
                closable={false}
                footer={[]}
            >
                <Row align={'middle'}>
                    <Col span={2} style={{fontSize: '1.2rem'}}>
                        选择客户
                    </Col>
                    <Col span={2}>
                        <Tooltip placement="bottomRight" title={this.state.orderTypeText} mouseLeaveDelay='0'
                                 mouseEnterDelay='.5'>
                            <Dropdown overlay={customerTypeMenu} trigger={['click']}>
                                <a className="dropdownItem currentOrderType" href='true'
                                   onClick={e => e.preventDefault()}>
                                    {this.state.orderTypeText} <DownOutlined/>
                                </a>
                            </Dropdown>
                        </Tooltip>
                    </Col>
                    <Col span={6}>
                        <Search
                            placeholder="输入名称/编码/联系人/手机"
                            onSearch={value => console.log(value)}
                            style={{width: '100%', marginLeft: '-1rem'}}
                        />
                    </Col>
                </Row>
                <Row align={'middle'} style={{marginTop: '1rem'}}>
                    <Col span={24}>
                        <Table
                            columns={customerSearchColumns}
                            dataSource={customerSearchTableData}
                            className='table'
                        />
                    </Col>

                </Row>
                <Row align={'middle'} style={{marginTop: '1rem'}}>
                    <Col span={24} align={'left'} style={{paddingRight: '1rem'}}>
                        <Button onClick={this.handleCancel}>取消</Button>
                        <Button onClick={this.handleOk}
                                style={{backgroundColor: '#12C09F', color: 'white', margin: '0 1rem'}}>确定</Button>
                        <span style={{color: '#F33333'}}>修改客户后，将清除已选择的商品数据，确定修改？</span>
                    </Col>

                </Row>

            </Modal>
            <Modal
                title={this.state.modalTitle}
                width={'50%'}
                visible={this.state.checkVisible}
                cancelText={'取消'}
                okText={'确定'}
                closable={false}
                footer={[]}
            >
                <Row>
                    <Col>
                        是否确定订货单{this.props.orderStore.orderMainId}通过{this.state.modalTitle}?
                    </Col>
                </Row>

                <Row align={'middle'} style={{marginTop: '1rem'}}>
                    <Col span={24} align={'left'} style={{paddingRight: '1rem'}}>
                        <Button onClick={this.handleCancel}>取消</Button>
                        <Button onClick={this.handleOk}
                                style={{backgroundColor: '#12C09F', color: 'white', margin: '0 1rem'}}>
                            确定</Button>
                    </Col>

                </Row>

            </Modal>
            <Layout>
                {this.props.children}
            </Layout>

            <Row className={'bottomBt'} align={'middle'}>
                <Col span={24} align={'center'}>
                    <Button>返回</Button>
                </Col>

            </Row>

        </div>);

    }
}

export default PurchaseOrderDetail
